<!--
 * @Author: zhangfan
 * @Date: 2024-06-25 18:36:08
 * @LastEditors: ***
 * @LastEditTime: 2024-06-25 20:59:09
 * @Description: 11
 * @FilePath: /demo/src/views/refs/index.vue
-->
<template>
  <div class="parent">
    <h3>父组件</h3>
    <button @click="getChildData">获取子组件1data里的数据并执行methods对应的方法</button>
    <div class="view-contain-box">
      <child-one ref="childOne" />
    </div>
  </div>
</template>
<script>
import ChildOne from './components/child-one.vue'
export default {
  components: {
    ChildOne
  },
  data () {
    return {
      text: 'hello'
    }
  },
  methods: {
    getChildData () {
      const message = this.$refs.childOne.message
      console.log('message==', message)
      const data = this.$refs.childOne.changeData()
      console.log('data==', data)
      // 需要注意下拾贝云框架中的refs嵌套问题
      // this.$refs.DataTable.$refs.tableRef[0].clearSelection()
      // const selection = this.$refs.DataTable.$refs.DataTable.getSelectionData();
      const sonMessage = this.$refs.childOne.$refs.sonOne.message
      console.log('sonMessage==', sonMessage)
      // $refs引用将指向子组件的实例
      // 在使用$refs时，需要确保在组件渲染完成后再去访问它们，例如在mounted生命周期钩子中，
      // 这样可以确保ref注册的元素或组件已经被正确地创建和挂载，从而避免出现访问不到的情况
      // if(this?.$refs?.DataTable) {}
    }
  }
}
</script>
<style scoped>
.parent {
  border: 1px solid #ccc;
  padding: 50px;
}
.view-contain-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
.operate {
  cursor: pointer;
}
</style>
